<template>
  <div>
<center>
  <h3 style="font-family: 华文行楷;">欢迎来到猪八戒网充钱页面</h3>
<div class="bbb">
<div class="block">
    <span class="demonstration">选择要充值的金额</span>
    <el-slider
      v-model="value"
       show-input
      :step="500"
      :max="10000"
      show-stops>
    </el-slider>
{{this.value}}(元)<p></p>

  <el-table
    :data="bank_list"
    border
    style="width: 600px">
    <el-table-column
      fixed
      prop="sf_yh"
      label="银行卡类型">
    </el-table-column>

    <el-table-column
      prop="bank_card"
      label="银行卡号">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.bank_card)">选择此卡</el-button>
      </template>
    </el-table-column>
  </el-table><p></p>
<el-button @click="GO">点击进行充值</el-button>

  </div>
</div>
</center>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      value: 0,
      bank_list:[],
      bank_code:'',
      userid:localStorage.getItem("userid"),
      al_url:''
    }
  },
  methods:{
    GO(){
      this.axios.post("ailpay_jie/",{
        bank_card:this.bank_code,
        userid:this.userid,
        money:this.value
      }).then((cg)=>{
        if(cg.data.code==400){
          alert(cg.data.msg)
          return
        }
        if(cg.data.code==200){
          alert("拉起支付宝中，请稍等")
          this.al_url=cg.data.msg
          window.location.href=this.al_url
        }
      })
    },
    getbank(){
      this.axios.get("Y_code/?userid="+this.userid).then((cg)=>{
        this.bank_list=cg.data.list
      })
    },
     handleClick(bank_card) {
        this.bank_code=bank_card
     }
  },
  mounted(){
    this.getbank()
  }

}
</script>

<style>
.bbb{
  width: 70%;
}
</style>